<template>
    <el-dialog :model-value="visible" :title="add?$t('role.addDialogTitle'):$t('role.editDialogTitle')" width="500px" :before-close="cb=>cancelForm('userFormRef')">
        <el-form
            ref="userFormRef"
            :model="userForm"
            :rules="validateRules"
            label-width="100px"
        >
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="userForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="description">
                <el-input v-model="userForm.description" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
                <el-button @click="cancelForm('userFormRef')" >{{$t('data.button.cancel')}}</el-button>
                <el-button type="primary" :loading="isSaveing" @click="submitForm('userFormRef')">{{$t('data.button.confirm')}}</el-button>
            </template>
    </el-dialog>
</template>
<script>

export default {
    props:{
        form:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        add:{
            type:Boolean,
            default:false
        },
        visible:{
            type:Boolean,
            default:false
        },
    },
    emits:['submit','close'],
    data(){
        return{
            userForm:this.form,
            isSaveing:false,
            validateRules:{
                roleName:[
                    {
                        required: true,
                        message: '请输入角色名称',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },
                ],
                description:[
                    {
                        max: 3000,
                        message: '不能超过3000字',
                        trigger: 'blur',
                    },
                ]
            }
        }
    },
    watch:{
        form:function(){
            this.userForm=this.form
        }
    },
    methods:{
        submitForm(userFormRef){
            this.$refs[userFormRef].validate(valid=>{
                if(valid){
                    this.$emit('submit',this.userForm);
                }
            })
        },
        cancelForm(userFormRef){
            console.log('cancelForm',this.userForm,this.$refs[userFormRef])
            this.$refs[userFormRef].resetFields()
            this.$emit('close');
        }
    }
}
</script>